﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.text.SimpleDateFormat,java.util.Calendar"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm");
	Calendar cal = Calendar.getInstance();
	cal.add(Calendar.DATE,1); 
	String today = format.format(cal.getTime());
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="JOMOO维修师傅专用系统" />
		<title>JOMOO维修登记平台</title>
		<link type="text/css" rel="stylesheet" href="include/css/css.css" />
		<link type="text/css" rel="stylesheet" href="include/iconFont/1.0.8/iconfont.css"/ >
		<link type="text/css" rel="stylesheet" href="include/css/button.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap-datetimepicker.min.css" />
	</head>
	<script type="text/javascript">
		var ccid = 1; 
		function init(){
			$('.form_datetime').datetimepicker({
		        format: 'yyyy-mm-dd hh:ii',
		        language: 'zh-CN',
		        pickDate: true,
		        pickTime: true,
		        hourStep: 1,
		        minuteStep: 15,
		        secondStep: 30,
		        autoclose: true,
		        pickerPosition: "top-left",
		        inputMask: true
		    });
			getProducts();
			getFirstCitys();
			var ssl = $("#scity");
			ssl.append("<option value=''>请先选择大区域</option>");
		}
			
		function getProducts()
		{
			var ddl = $("#product");
            $.ajax({
				type: "POST",
				data:{"custid":ccid},
				url: "JqueryAction/getProducts.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].id+">"+datas[i].typeName+"</option>");
					}
				}
			});
		}
		
		function getFirstCitys()
		{
			var ddl = $("#fcity");
            $.ajax({
				type: "POST",
				url: "JqueryAction/getFirstCity.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
            		document.getElementById("scity").options.length=0;
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].id+">"+datas[i].cityName+"</option>");
					}
				}
			});
            getSecondCitys();
		}
		
		function getSecondCitys()
		{
			var ccl = $("#scity");
			var pvalue = $("#fcity")[0].value;
			 $.ajax({
				type: "POST",
				data:{"scityid":pvalue},
				url: "JqueryAction/getSecondCitys.action",
				dataType: "json",
				success: function(datas)
				{
					document.getElementById("scity").options.length=0;
					
					for(var i=0;i<datas.length;i++)
					{
						ccl.append("<option value="+datas[i].cityName+">"+datas[i].cityName+"</option>");
					}
				}
			});
		}
		
		function changeMoney()
		{
			var specid = $("#proSpec")[0].value;
			if('' == specid)
			{
				return;
			}
			else
			{
				$.ajax({
				type: "POST",
				data:{"specid":specid},
				url: "CardAction/getSpecSale.action",
				dataType: "json",
				success: function(datas)
				{
					$("#money").val(datas.specsale);
				}
				});
			}
		}
		
		function getProductSpec()
		{
			var ddl = $("#product");
			var ccl = $("#proSpec");
			var pvalue = $("#product")[0].value;
			
			if('' == pvalue)
			{
				document.getElementById("proSpec").options.length=0;
				ccl.append("<option value=''>请选择产品分类下属类型</option>");
				$("#money").val('');
			}
			else
			{
				$.ajax({
				type: "POST",
				data:{"proid":pvalue},
				url: "JqueryAction/getProductSpec.action",
				dataType: "json",
				success: function(datas)
				{
					document.getElementById("proSpec").options.length=0;
					
					for(var i=0;i<datas.length;i++)
					{
						ccl.append("<option value="+datas[i].id+">"+datas[i].specName+"</option>");
					}
					
					var specid = $("#proSpec")[0].value;
					
					$.ajax({
					type: "POST",
					data:{"specid":specid},
					url: "CardAction/getSpecSale.action",
					dataType: "json",
					success: function(datas)
					{
						$("#money").val(datas.specsale);
					}
					});
				}
				});
			}
		}
		
		function systime()
		{
			var dateTime=new Date();  
	        var yy=dateTime.getFullYear();  
	        var MM=dateTime.getMonth()+1;  
	        var dd=dateTime.getDate();  
	        var hh=dateTime.getHours();  
	        var mm=dateTime.getMinutes();  
	        var ss=dateTime.getSeconds();  
	        
	        //分秒时间是一位数字，在数字前补0。  
	        mm = extra(mm);  
	        ss = extra(ss);  
	         //将时间显示到ID为time的位置，时间格式形如：19:18:02  
        	document.getElementById("popname").value = "客户"+yy+MM+dd+hh+mm+ss;  
		}
		
		function autoPhone()
		{
			document.getElementById("popPhone").value = "13000000000";  
		}
		
		//补位函数。  
	    function extra(x)  
	    {  
	        //如果传入数字小于10，数字前补一位0。  
	        if(x < 10)  
	        {  
	            return "0" + x;  
	        }  
	        else  
	        {  
	            return x;  
	        }  
	    }  
		
		function removRead()
		{
			$('#money').attr("readOnly",false);
			$("input[name='money']").focus();
		}
		
		function addRead()
		{
			$('#money').attr("readOnly",true);
		}
		
		function returnMain()
		{
			layer.confirm('您确定取消录入服务卡操作？？', {
			  btn: ['不录入了','继续录']
			}, function(){
				window.parent.document.getElementById("showview").src="view/ServiceCard/ServiceCardCustomer.jsp";
			}, function(){
			  layer.msg('欢迎继续录入', {icon: 1});
			});
		}
		
		function returnMode()
		{
			window.parent.document.getElementById("showview").src="view/ServiceCard/ServiceCardView.jsp";
		}
		
		function submits()
		{
			var phone = /^1(3|4|5|7|8)\d{9}$/;
			var number = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
			
			// 用户名
			var popname = $("#popname").val();
			//联系电话
			var poPhone = $("#popPhone").val();
			//产品分类
			var product = $("#product")[0].value;
			//产品规格
			var proSpec = $("#proSpec")[0].value;
			//大市
			var fcity = $("#fcity")[0].value;
			//区域
			var scity = $("#scity")[0].value;
			// 详细地址
			var popAddress = $("#popAddress").val();
			//安装类型
			var setuptype = $("#setuptype")[0].value;
			//预约时间
			var setuptime = $("#setuptime").val();
			// 金额
			var money = $("#money").val();
			//是否有单
			var iscard = $("#iscard")[0].value;
			
			if('' == popname)
			{
				layer.tips('客户姓名不能为空（可自动生成）', '#popname', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			
			if('' == poPhone)
			{
				layer.tips('客户联系电话不能为空（可自动生成）', '#popPhone', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			
			var a = 1;
			
			if(!phone.test(poPhone) && !number.test(poPhone))
			{
				a = 0;
			}
			
			if(0 == a)
			{
				layer.tips('请输入有效的手机号码或固定电话号码', '#popPhone', {
				  tips: [3, '#FF3300']
				});
			    return; 
			}
			
			if('' == product)
			{
				layer.tips('请选择产品分类', '#product', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			
			if('' == popAddress)
			{
				layer.tips('请填写客户详细地址', '#popAddress', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			
			if('' == money)
			{
				layer.tips('请填写产品价格', '#money', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			else if(isNaN(money))
			{
				layer.tips('产品价格为纯数字', '#money', {
				  tips: [3, '#FF3300']
				});
				return;
			}
			
			haveResult(popname, poPhone, product, proSpec, fcity, scity, popAddress, setuptype, setuptime, money, iscard);
		}
		
		function haveResult(popname, poPhone, product, proSpec, fcity, scity, 
		                    											popAddress, setuptype, setuptime, money, iscard)
		{
			layer.confirm('确认录入安装服务卡？', {
			  btn: ['确定录入','取消录入']
			}, function(){
				$.ajax({
				type: "POST",
				url: "CardAction/addServiceCard.action",
				dataType: "json",
				async:true,
				data:{"popname":popname,"poPhone":poPhone,"product":product,"proSpec":proSpec,"fcity":fcity,"scity":scity,
						"popAddress":popAddress,"setuptype":setuptype,"setuptime":setuptime,"money":money,"iscard":iscard,"custid":ccid,"cardFlag":1},
				success: function(datas)
				{
					if( datas.result)
					{
						endShow();
					}
					else
					{
						layer.msg('未录入成功，系统错误请联系作者', {icon: 5});
					}
				}
            });
			}, function(){
				layer.msg('未提交此单录入', {icon: 5});
			});
		}
		
		function showCenters()
	    {
	    	layer.open({
			    type: 2,
			    skin: 'layui-layer-lan', 
			    title: "向导流程",
			    shadeClose: false,
			    shade: 0.4,
			    closeBtn: 2,
			    anim:5,
			    area: ['720px', '55%'],
			    offset:['90px','170px'],
			    fadeIn : [600 , true],
			    loading : {type : 1},
			    content: 'view/sheet/FlowSheet.jsp?sheet=4'
			}); 
	    }
		
		function endShow()
	    {
	    	layer.open({
			    type: 2,
			    skin: 'layui-layer-lan', 
			    title: "向导流程",
			    shadeClose: false,
			    shade: 0.7,
			    closeBtn: 0,
			    anim:5,
			    area: ['720px', '62%'],
			    offset:['90px','170px'],
			    fadeIn : [600 , true],
			    loading : {type : 1},
			    content: 'FlowSheet.jsp?sheet=5',
			    end:function(index){
			    	window.parent.document.getElementById("showview").src="view/ServiceCard/ServiceCardView.jsp";
			    }
			}); 
	    }
		
	</script>
	<body onload="init();">
	<form action="">
			<div class="mainbody" style="height: 45px;">
			<div class="currmenu">
					<p class="goom" style="padding-top:7px;padding-left: 20px;">
						<span style="color: #638EC7;font-size: 15px;font-weight: bold;"><a href="javascript:void(0);" onclick="returnMode()">向导模式</a>->九牧单个录入模版填写</span>
					</p>
			</div>
		</div>
		<div style="background:url('include/images/jomooSoloCard.png') no-repeat;margin-left: 30px;">
			<table border="0" style="width:92%; margin-left: 30px;">
				<tr>
					<td style="width: 180px;padding-top: 182px;">&nbsp;</td>
					<td style="width: 295px;padding-top: 178px;padding-left: 5px">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="请输入安装客户姓名" name="popname" id="popname">
							<span class="input-group-btn">
								<button  class="btn btn-success" type="button" onclick="systime();">自动生成</button>
							</span> 
						</div>
   					</td>
   					<td style="width: 148px;padding-top: 178px;">&nbsp;</td>
					<td colspan="2" style="width: 200px;padding-top: 180px;text-align: right;padding-right: 32px;">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="请输入安装客户电话" id="popPhone" name="popPhone">
							<span class="input-group-btn">
								<button class="btn btn-success" type="button" onclick="autoPhone();">自动生成</button>
							</span> 
						</div>
					</td>
				</tr>
				<tr>
					<td style="width: 180px;">&nbsp;</td>
					<td style="width: 180px;padding-left: 80px;padding-top: 20px;" colspan="3">
							<div class="col-sm-4" >
								<select class="form-control"  id="product" name="product" onclick="getProductSpec();">
									<option value="">请选择产品分类</option>
								</select>
							</div>
							<div class="col-sm-4" style="margin-left:20px;">
								<select class="form-control" id="proSpec" name="proSpec" onclick="changeMoney();" >
									<option value="">请选择产品分类下属类型</option>
								</select>
							</div>
					</td>
				</tr>
				<tr>
					<td style="width: 180px;padding-top: 15px;">&nbsp;</td>
					<td style="width: 180px;padding-left: 15px;padding-top: 22px;" colspan="3">
						<div class="col-sm-2">
								<select class="form-control" id="fcity" name="fcity" onclick="getSecondCitys();">
								</select>
							</div>
							<div class="col-sm-3">
								<select class="form-control" id="scity" name="scity" >
								</select>
							</div>
							<div class="col-sm-6">
								<input type="text" class="col-sm-7 form-control"  placeholder="请输入客户安装详细地址" id="popAddress" name="popAddress">
							</div>
					</td>
				</tr>
				<tr>
					<td style="width: 180px;padding-top: 30px;">&nbsp;</td>
					<td style="width: 295px;padding-top: 25px;">
						<div class="col-sm-10">
								<select class="form-control" name="setuptype" id="setuptype">
									<option value="1" selected="selected">预约安装</option>
									<option value="2">维修上门</option>
								</select>
							</div>
					</td>
					<td colspan="2" style="width: 200px;padding-top: 25px;text-align: left;padding-left:150px;">
						<input size="16" style="width: 240px" type="text" value="<%=today %>" readonly class="form_datetime form-control" id="setuptime" name="setuptime">
					</td>
				</tr>
				<tr style="height: 50px;padding-top: 180px;">
					<td style="width: 180px;padding-top: 30px;">&nbsp;</td>
					<td style="width: 295px;padding-top: 30px;padding-left: 12px">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="￥" readonly="readonly" id="money" name="money" onblur="addRead();">
							<span class="input-group-btn">
								<button class="btn btn-info" type="button" onclick="removRead();" on>金额校正</button>
							</span> 
						</div>
					</td>
					<td colspan="2" style="width: 200px;padding-top: 30px;text-align: left;padding-left: 170px;">
						<div class="col-sm-6">
								<select class="form-control" id="iscard" name="iscard">
									<option selected="selected" value="1">有单</option>
									<option value="0">无单</option>
								</select>
							</div>
					</td>
				</tr>
			</table>
			<table border="0" style="width: 92%;margin-left: 30px;padding-top: 45px;height: 85px;">
				<tr style="height: 50px;padding-top: 100px;">
					<td colspan="2" style="width:40%;text-align: right;padding-right: 20px;"><a href="javascript:void(0);" class="button button-rounded button-royal" onclick="showCenters();">向导流程图</a></td>
					<td colspan="2" style="width:15%;text-align: left;"><a href="javascript:void(0);" class="button button-rounded button-primary" onclick="submits();">确认录入</a></td>
					<td colspan="2" style="width:45%;text-align: left;padding-left: 10px;">&nbsp;&nbsp;<a href="javascript:void(0);" class="button button-rounded button-caution" onclick="returnMain();">取消录入</a></td>
				</tr>
			</table>
		</div>
		</form>
		<script type="text/javascript" src="include/js/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="include/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="include/layer/layer.js"></script>
		<script type="text/javascript" src="include/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="include/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	</body>
</html>